<!-- 可行性研究报告 -->
<template>
  <el-descriptions :column="2" size="large" class="td-item">
    <el-descriptions-item label-class-name="right-align" class-name="my-content" label='项目名称'>
      <span class="text--info subtext">{{projectInfo.projectName}}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" class-name="my-content" label='评审项目阶段'>
      <span class="text--info subtext">{{processName(projectInfo?.stageStatus)}}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" class-name="my-content" label='项目立项书'>
      <div v-if="projectInfo?.projectProposalArr?.length" class="file-wrap">
        <span
          class="text--info download-link subtext"
          v-for="(obj, index) in projectInfo?.projectProposalArr"
          :key="index"
          @click.prevent="handlePreview(obj)"
        >
          <el-link :underline="false" icon="el-icon-folder">{{ obj?.fileName }}</el-link>
        </span>
      </div>
      <div class="text--info subtext file-wrap" v-else> - </div>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" class-name="my-content" label='关键结论'>
      <template v-if='fsbStudyDetail?.keyConclusion?.length > 800'>
          <el-tooltip class="box-item"  placement="top-end">
            <template #content>
              <div style="max-width: 800px;line-height: 18px;">{{fsbStudyDetail.keyConclusion}}</div>
            </template>
            <span class="text--info subtext short-text">{{fsbStudyDetail.keyConclusion}}</span>
          </el-tooltip>
      </template>
      <span v-else class="text--info subtext short-text">{{fsbStudyDetail.keyConclusion}}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" class-name="my-content" label='可行性研究报告'>
      <div v-if="fsbStudyDetail?.fsbStudyAttachmentArr?.length" class="file-wrap">
        <span
          class="text--info download-link subtext"
          v-for="(obj, index) in fsbStudyDetail?.fsbStudyAttachmentArr"
          :key="index"
          @click.prevent="handlePreview(obj)"
        >
          <el-link :underline="false" icon="el-icon-folder">{{ obj?.fileName }}</el-link>
        </span>
      </div>
      <div class="text--info subtext file-wrap" v-else> - </div>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" class-name="my-content" label='备注'>
      <template v-if='fsbStudyDetail?.remark?.length > 800'>
        <el-tooltip class="box-item"  placement="top-end">
          <template #content>
            <div style="max-width: 800px;line-height: 18px;">{{fsbStudyDetail.remark}}</div>
          </template>
          <span class="text--info subtext short-text">{{fsbStudyDetail.remark}}</span>
        </el-tooltip>
      </template>
      <span class="text--info subtext short-text" v-else>{{fsbStudyDetail.remark}}</span>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import {processStatus}  from  "/@/utils/globalConstant";
const props = defineProps({
  projectInfo: {
    type: Object
  },
});
const info = ref({});
const fsbStudyDetail = ref({})
watch(
  () => props.projectInfo,
  newvalue => {
    info.value = newvalue;
    fsbStudyDetail.value = newvalue?.projectFsbStudyDTO || {}
  },
  { immediate: true }
);

onMounted(() => {
  info.value = props.projectInfo;
});
const handlePreview = (item: any) => {
  if (item.response) {
    window.open(
      `${location.origin}${location.pathname}#/online?uuidFile=${item?.response.data.uuidFile}&fileName=${item?.response.data.fileName}`
    );
  } else {
    window.open(
      `${location.origin}${location.pathname}#/online?uuidFile=${item.uuidFile}&fileName=${item.fileName}`
    );
  }
};

const processName = (stageStatus) => {
  return processStatus.get(+stageStatus)
}
</script>

<style lang="scss" scoped>
  .file-wrap{
    display: inline-block;
    vertical-align: top
  }
  .td-item {
    :deep tr{
      display: flex;
      align-items: flex-start;
       .el-descriptions__cell {
        display: flex;
        align-items: flex-start;
        width: 50%;
        .my-content{
          flex:1
        }
      }
    }
  }
  .short-text{
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .download-link{
    margin-right:10px
  }
</style>
